<template>
  <div v-loading="isLoading">
    <div class="formboard">
      <div  class="formboard-item" v-for="(item,key) in source" :key="key">
        <div class="formboard-item-topImg">
          <img :src="$store.state.user.BASE_URL + item.japplication" alt="">
          <div v-if="item.jeSource ==  0" class="topImg-del">
            <i @click="del(item)" class="el-icon-delete"></i>
          </div>
          <div class="topImg-tips">
            <span>适用于{{item.scName}}{{item.jSex == 1 ?'男生' : item.jSex == 2 ? '女生' : '全性别'}}</span>
          </div>
        </div>
        <div class="formboard-item-title">
        <span>
          {{item.jname}}
        </span>
        </div>
        <div class="formboard-item-info">
          <span>{{item.jesummary}}</span>
        </div>
        <div class="formboard-item-handle">
          <el-button size='small' @click="saveTaskInfo(item,$event)" :plain="item.jeSource == 0 ? true : false" class="handle com" :type="item.jeSource == 0 ? 'primary':'primary'">
            {{item.jeSource == 0 ? '生成计划' :'一键布置'}}
          </el-button>
          <el-button size='small' plain class="edit com" @click="lookMessage(item)">查看详情</el-button>
        </div>
      </div>
    </div>
    <div style="display: flex;justify-content: space-between">
      <div></div>
      <el-pagination
        style="margin-top: 20px"
        @size-change="changeSize"
        @current-change="changePage"
        :current-page="pageForm.pageNum"
        :page-sizes="[8, 16, 24, 32]"
        :page-size="pageForm.pageSize"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>

</template>

<script>
import { AplanList,fixUpHomework } from '@/api/sports/Aplan'
import { decrementPlan } from '@/api/sports/plan'

export default {
  props:['checkedSex','checkedGrade'],
  data(){
    return {
      source:[],
      isLoading:false,
      total: -1,
      pageForm:{
        pageSize:8,
        pageNum:1
      }
    }
  },
  watch:{
    checkedSex:{
      handler(){
        this.getAplanSource();
      }
    },
    checkedGrade:{
      handler(){
        this.getAplanSource();
      }
    }
  },

  methods:{
    del(e){
      const {jId} = e;
      this.$confirm('此操作将永久删除该作业模板, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        decrementPlan({jId,jeSource:3}).then(response=>{
          if(response.code === 200){
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getAplanSource();
          }else{
            this.$message({
              type:"error",
              message:response.message
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    changeSize(size){
      this.pageForm.pageSize = size;
      this.getAplanSource()
    },
    changePage(page){
      this.pageForm.pageNum = page;
      this.getAplanSource()
    },
    getAplanSource(){
      this.isLoading = true
      AplanList({jSex:this.checkedSex,jScId:this.checkedGrade,jeAuthor:this.$store.state.user.USER_INFO.id,...this.pageForm}).then(response=>{
        if (response.code === 200) {
          this.source = response.result.list;
          this.total = response.result.total
        }
        this.isLoading = false
      })
    },
    lookMessage(e) {
      this.$router.push({
        path:"/sports/planAdd",
        query: {
          id: e.jId,
          type: e.jeSource == '0' ? 2 : 3,
          jSource:e.jeSource
        }
      })
    },
    saveTaskInfo(item,evt){
      let target = evt.target;
      if (target.nodeName == "SPAN") {
        target = evt.target.parentNode;
      }
      target.blur();
      this.$confirm(item.jeSource == 0 ? '是否选择生成计划':'是否选择一键布置', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.isLoading = true;
        fixUpHomework({jId:item.jId,
          jEAuthor:this.$store.state.user.USER_INFO.id,
          jShId:this.$store.state.user.USER_INFO.pscShId,
          jeSource:item.jeSource
        }).then(response=>{
          if (response.code === 200) {
            this.$message.success("布置成功");
          }else{
            this.$message.error(response.message);
          }
          this.isLoading = false
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: item.jeSource == 0 ? '已取消生成':'已取消布置'
        });
      });

    }
  },
  created() {
    this.getAplanSource()
  }
}
</script>

<style lang="scss" scoped>
.formboard{
  display: flex;
  flex-wrap: wrap;
  }
.formboard-item{
  margin-top: 20px;
  width: calc(25% - 10px);
  margin-left: 10px;
  border: 1px solid #F1F1F1;
  border-radius: 0 8px 8px 8px;
  display: flex;
  flex-direction: column;
  padding-bottom: 15px;
  .formboard-item-topImg{
    width: 100%;
    height: 200px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    img{
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 100%;
      margin: auto;
    }
    .topImg-del{
      position: absolute;
      top: 20px;
      right: 10px;
      background: #f56c6c;
      display: inline-block;
      width: 30px;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #FFFFFF;
      border-radius: 50%;
      cursor: pointer;
    }
    .topImg-tips {
      position: absolute;
      right: 0;
      bottom: 10px;
      padding: 10px;
      background:#1b91ff ;
      color: #FFFFFF;
      border-radius: 16px 0 0 16px;
      font-size: 13px;
    }
  }
  .formboard-item-title{
    font-size: 14px;
    padding: 10px;
    box-sizing: border-box;
    color: #000000;
    height: 40px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .formboard-item-show {
    font-size: 12px;
    color:#878787 ;
    padding: 3px 10px;
    box-sizing: border-box;
    line-height: 20px;

    span{
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
    }
  }
  .formboard-item-info{
    font-size: 12px;
    color:#878787 ;
    padding: 3px 10px;
    box-sizing: border-box;
    line-height: 20px;
    height: 80px;
    span{
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
    }
  }
  .formboard-item-handle{
    display: flex;
    justify-content: space-between;

    .edit{
      margin-right: 5%;
    }
    .handle{
      margin-left: 3%;
    }
    .com{
      flex: 1;
    }
  }
}

</style>
